<template>
	<div v-show="isShow" class="backTop" @click="backTop">
		<i class="iconfont icon-shang"></i>
	</div>
</template>

<script>
	export default {
		name: "backTop",
		data() {
			return {
				isShow: false
			}
		},
		methods: {
			backTop() {
				let timer = setInterval(()=>{
					let curTop = window.pageYOffset;
					if(curTop > 0){
						window.scrollTo(0,curTop-20);
					}else{
						clearInterval(timer);
					}
				}, 1000/60)
			},
			myscroll(){
				let curTop = window.pageYOffset;
				if(curTop > window.innerHeight/2){
					this.isShow = true;
				}else{
					this.isShow = false;
				}
			}
		},
		mounted(){
			window.addEventListener("scroll",this.myscroll);
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';

	.backTop {
		position: fixed;
		bottom: 10%;
		right: vw(20);
		width: vw(36);
		height: vw(36);
		line-height: vw(36);
		border: 1px solid #666;
		border-radius: 50%;
		z-index: 5;
		text-align: center;
		background: rgba(255, 255, 255, .1);

		i {
			font-size: vw(30);
			color: #666;
		}
	}
</style>
